<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
This sample is equivalent to the samplesCore/basic.html sample,
except that it uses jquery.tmplPlus.js in order to take advantage
of the alternative API:
    $( targetContainer ).append( template, data, options );
rather than
    $( template ).tmpl( data, options ).appendTo( targetContainer );
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jquery.tmpl.js" type="text/javascript" ></script>
<script src="../../jquery.tmplPlus.js" type="text/javascript"></script>
<script type="text/javascript">

var dataObject = {
	firstName: "John",
	lastName: "Resig",
	url: "http://ejohn.org/",
	cities: [
		"Boston, MA",
		"San Francisco, CA"
	]
};

var arrayOfDataObjects = [
	dataObject
	,
	{
		firstName: "Dave",
		lastName: "Reed",
		url: "http://dave.org/",
		cities: [
			"Seattle, WA",
			"Los Angeles, CA",
			"New York, NY"
		]
	},
	{
		firstName: "Boris",
		lastName: "Moore",
		url: "http://boris.org/",
		cities: [
			"Redmond, WA",
			"Seattle, WA",
			"New York, NY"
		]
	}
];

function cityJoin( separator ) {
	return this.data.cities.join( separator || ", " );
}

function getName() {
	return this.data.firstName + " " + this.data.lastName;
}

function index( array ) {
	return $.inArray( this.data, array ) + 1;
}

jQuery(function(){
	// A template string
	var tmpl = '<li><a href="${url}">${getName()}</a> {{if $item.showCities}}(${cityJoin()}){{/if}}</li>';

	// Renders one LI, filled with data, then appends it into the UL
	$("ul").append( tmpl, dataObject, null );

	// Store a string as a compiled template for later use
	$.template( "myTmpl", '<li>My template: <a href="${url}">${getName()}</a> {{if $item.showCities}}(${cityJoin()}){{/if}}</li>' );

	// Render stored template and insert after target.
	// Target wrapped set has more than one element, so rendered template cloned into two places in DOM
	$(".multiple").after( "myTmpl", dataObject );

	// Appends multiple LIs for each item. Set options: showCities and array, referenced within the template.
	$("ul").prepend( "#sometmpl", arrayOfDataObjects, { array: arrayOfDataObjects, showCities: true } );

	// Example of template that has leading or trailing text
	$("#target").before( "#leadingOrTrailingText", arrayOfDataObjects );
});
</script>

<script id="sometmpl" type="text/x-jquery-tmpl">
	<li>${index($item.array)} of ${$item.array.length}) <a href="${url}">${getName()}</a>
	{{if $item.showCities}}
		Cities: {{each cities}} ${this} {{/each}}
	{{else}}
		No Cities
	{{/if}}
	</li>
</script>

<script id="leadingOrTrailingText" type="text/x-jquery-tmpl">
	${firstName} <strong>${lastName}</strong> <br/>
</script>

<ul><li class="multiple">first</li><li class="multiple">last</li></ul>

<div id="target">Target</div>

</body>
</html>